<script setup>

import ChooseDialog from "@/components/Asset/ChooseDialog.vue";

const tableData = reactive({
  loading: false,
  list: []
});

const chooseDialog = ref();
let deletedList = [];

function handleChoose() {
  chooseDialog.value.open();
}

function onChooseSub(selected) {
  if (selected) {
    selected.forEach((item)=> {
      let row = {...item};
      row.sourceId = row.id;
      delete row.id;
      tableData.list.push(row);
    })
  }
}

function handleDelete({ row, $index }) {
  // 如果是编辑状态需要把删除的行存起来
  deletedList.push(row);
  tableData.list.splice($index, 1);
}

function getList() {
  return tableData.list;
}

function setList(list) {
  tableData.list = list;
  deletedList = [];
}

function getDeletedList() {
  return deletedList;
}

defineExpose({
  getList, setList, getDeletedList
})

</script>

<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
          type="primary"
          plain
          icon="Search"
          @click="handleChoose"
      >选择资产</el-button>
    </el-col>
  </el-row>
  <el-table v-loading="tableData.loading" :data="tableData.list">

    <slot></slot>

    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template  #default="scope">
        <el-link
            size="primary"
            @click="handleDelete(scope)"
        >删除</el-link>

      </template>
    </el-table-column>
  </el-table>
  <choose-dialog ref="chooseDialog" @sub="onChooseSub"></choose-dialog>
</template>

<style scoped lang="scss">

</style>